<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<!-- <view class="back iconfont icon-xiangzuo1" @tap="backPage"></view> -->
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">优惠券</view>
		</view>

		<view class="nav" :class="scrrol == true ? 'scrrolHeader02' : ''">
			<view class="navauto">
				<block v-for="(item, index) in menu" :key="index">
					<view class="menu" :data-index="index" @tap="setNavMenu">
						<view class="text" :class="index == select ? 'menucolor' : ''">{{ item.text }}
							<span v-if="index == 0">({{no_use}})</span>
							<span v-if="index == 1">({{used}})</span>
							<span v-if="index == 2">(3)</span>
							<view class="line" :class="index == select ? 'menucolor02' : ''"></view>
						</view>

					</view>
				</block>
			</view>
		</view>
		<view class="clear_box"></view>
		<view class="clear_box02"></view>

		<block v-for="(item, index) in info" :key="index">
			<view class="content_box">
				<view class="money_box" :class="item.state == 1||item.state == 2 ? 'bgcolor' : ''">
					<view class="money">
						<view class="m">¥</view>
						{{item.money}}
					</view>
					<view class="text">优惠券</view>
				</view>
				<view class="content">
					<view class="title" v-if="is_agent" :class="item.state == 1 || item.state == 2? 'bgcolor02' : ''">{{item.title}}<span>(x{{item.stock}})</span></view>
					<view class="rule" :class="item.state == 1 || item.state == 2? 'bgcolor02' : ''">{{item.create_time}}</view>

					<view class="line"></view>
					<view class="time_box">
						<view class="time">指定平台  指定渠道</view>
						<view class="state" v-if="item.state == 0">
							<button class="text" v-if="is_agent" open-type="share" :data-param="item.id">去分享</button >
							<view class="text" v-if="!is_agent">去使用</view>
						</view>
						<view class="state" v-if="item.state == 1">
							<view class="text02" v-if="is_agent">已分享</view>
							<view class="text02" v-if="!is_agent">已使用</view>
						</view>
						<view class="state" v-if="item.state == 2">
							<view class="text02">已过期</view>
						</view>
					</view>
				</view>

			</view>
		</block>
		
		<view class="add_box" :data-url="'/pages/coupon/add'" @click="gotopage" v-if="is_agent">
			<view class="icon iconfont icon-jia"></view>
			<view class="text">生成</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				scrrol: false,
				info: [],
				select: 0,
				menu_1: [{
						text: '已生成'
					},
					{
						text: '已分享'
					},
				],
				menu: [{
						text: '未使用'
					},
					{
						text: '已使用'
					},
				],
				is_agent:0,
				no_use:0,
				used:0,
			}
		},
		onLoad() {
			let that = this;
			that.loadData();
			that.getCouponList();
		},
		onShow() {
			let that = this;
			let coupon_list = uni.getStorageSync('coupon_list');
			if (coupon_list){
				that.page=1;
				that.getCouponList();
				uni.removeStorageSync('coupon_list');
			}
		},
		methods: {
			setNavMenu(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.select = index;
				that.getCouponList();
			},
			loadData() {
				let that = this;
				that.Net._get('auth/info', {}, res => {
					if (res.code == 200 && res.data.is_agent == 1) {
						that.is_agent = res.data.is_agent;
						that.menu = that.menu_1;
					}
				});
			},
			getCouponList(){
				let that = this;
				that.Net._get('auth/coupon/list', {status:that.select}, res => {
					if (res.code == 200) {
						that.info = res.data.list.data;
						that.no_use = res.data.no_use;
						that.used = res.data.used;
					}
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
			onShareAppMessage(res) {
				// 如果是直接分享按钮分享
				if (res.from === 'button') {
					// 处理分享参数
					const shareTicket = res.target.dataset.param;
					// 使用shareTicket作为参数传递给后端，后端可以解析获取额外信息
					// 返回分享的内容
					return {
						title: '优惠券',
						path: `/pages/index/index?coupon_id=${shareTicket}`,
						imageUrl: '' // 分享卡片的图片，可选
					};
				}
			}
		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
		onReachBottom() {
			var that = this;
			that.page++;
			that.Net._get('auth/coupon/list', {per_page:'10',page:that.page,status:that.selec}, res => {
			  if (res.code == 200) {
			    if (res.data.list.data == '') {
			      uni.showToast({
			        title: '已经是最后一页了',
			        duration: 2000,
			        icon: 'none'
			      });
			    } else {
			      that.info = that.info.concat(res.data.list.data); //将数据拼接在一起
			    }
			  } else if (res.code == 0) {
			    that.Msg.Success(res.msg, res => {});
			  }
			});
		},
	}
</script>

<style>
	.scrrolHeader {
		background-color: #FF7701 !important;
	}

	.scrrolHeader02 {
		background-color: #fff !important;
	}

	.nav {
		width: 100%;
		height: 13.5vw;
		overflow: hidden;
		overflow-x: auto;
		position: fixed;
		left: 0;
		top: calc(13.4vw + var(--status-bar-height));
		z-index: 99;
		/* background-color: #fff;
			border-bottom: 1px solid #e8e8e8; */
		box-sizing: border-box;
	}

	.nav .navauto {
		width: fit-content;
		display: flex;
		justify-content: space-around;
		/* margin-left: 4%; */
		min-width: 100%;
	}

	.nav .navauto .menu {
		/* width: 20%; */

	}

	.nav .navauto .menu .text {
		font-size: 4.5vw;
		color: #666666;
		text-align: center;
		line-height: 13.5vw;
		position: relative;
	}

	.nav .navauto .menu .line {
		width: 100%;
		height: 2.3vw;
		background-color: #FF7701;
		border-radius: 2.3vw;
		position: absolute;
		left: calc(50% - 50%);
		bottom: 3.5vw;
		z-index: -1;
		display: none;

	}

	.menucolor {
		color: #091624 !important;
		font-weight: bold;
		font-size: 4.7vw !important;
	}

	.menucolor02 {
		display: block !important;
	}

	.menucolor03 {
		background-color: #FF9822 !important;
	}
	
	.content_box {
		width: 90%;
		margin: 0 auto;
		display: flex;
		margin-top: 3%;
	}
	
	.content_box .money_box {
		width: 30%;
		height: 27vw;
		background-color: #FF7F22;
		border-radius: 3vw 0 0 3vw;
	}
	
	
	
	.content_box .money_box .money {
		font-size: 30px;
		color: #fff;
		text-align: center;
		margin-top: 15px;
		display: flex;
		justify-content: center;
	}
	
	.content_box .money_box .money .m {
		font-size: 4.5vw;
		margin-top: 3.2vw;
		margin-right: 1vw;
		font-weight: bold;
	}
	
	.content_box .money_box .text {
		font-size: 12px;
		color: #fff;
		text-align: center;
		margin-top: 8px;
	}
	
	.content_box .content {
		width: 70%;
		background-color: #fff;
		border-radius: 0 3vw 3vw 0;
		padding: 10px;
		overflow: hidden;
	}
	
	.content_box .content .title {
		font-size: 3.5vw;
		color: #333;
		line-height: 6vw;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-weight: bold;
	}
	
	.content_box .content .rule {
		font-size: 3.2vw;
		color: #666;
	}
	
	.content_box .content .line{
		width: 100%;
		height: 1px;
		background-color: #f5f5f5;
		margin-top: 10px;
	}
	
	.content_box .content .time_box{
		width: 100%;
		display: flex;
		align-items: center;
		position: relative;
		
	}
	
	.content_box .content .time_box .icon{
		width: 10vw;
		position: absolute;
		right: -4vw;
		top: 3vw;
	}
	
	.content_box .content .time_box .icon image{
		width: 100%;
	}
	
	.content_box .content .time_box .time{
		flex: 1;
		font-size: 12px;
		color: #999;
		margin-right: 10px;
		margin-top: 8px;
	}
	
	.content_box .content .time_box .state{
		width: 70px;
		position: relative;
		margin-top: 7px;
	}
	
	.content_box .content .time_box .state .text{
		height: 7vw;
		line-height: 7vw;
		border-radius: 7vw;
		padding: 0 2vw;
		font-size: 3.2vw;
		text-align: center;
		color: #fff;
		background-color: #FF7F22;
	}
	
	.content_box .content .time_box .state .text02{
		height: 7vw;
		line-height: 7vw;
		border-radius: 7vw;
		padding: 0 2vw;
		font-size: 3.2vw;
		text-align: center;
		color: #fff;
		background-color: #999;
	}
	
	.bgcolor{
		background-color: #999 !important;
	}
	
	.bgcolor02{
		color: #999 !important;
	}
	
	.add_box{
		width: 30vw;
		height: 13vw;
		border-radius: 13vw;
		background-color: #FF7F22;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 10vw;
		left: calc(50% - 15vw);
		z-index: 999;
	}
	
	.add_box .icon{
		font-size: 4vw;
		color: #fff;
		margin-right: 2vw;
	}
	
	.add_box .text{
		font-size: 4vw;
		color: #fff;
		font-weight: bold;
	}
</style>